<template>
    <div class="discover_parent">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item in swipeList" :key="item.id">
                <img :src="item.url" alt="">
            </van-swipe-item>
        </van-swipe>
        <div class="grid">
            <van-grid square :border="false">
                <van-grid-item v-for="item in gridList" :key="item.id" :icon="item.icon" :text="item.text" @click="onGridClick(item.id)" />
            </van-grid>
        </div>
        <div class="songList">
            <div class="top">
                <div class="left">发现好歌单</div>
                <div class="right" @click="toSongList">查看更多</div>
            </div>
            <div class="bottom">
                <van-grid :border="false" :column-num="3">
                    <van-grid-item v-for="item in songList" :key="item.id">
                        <van-image :src="item.url" />
                        <div class="text">{{ item.name }}</div>
                    </van-grid-item>
                </van-grid>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const swipeList = ref([
    { id: 1, url: 'https://wx3.sinaimg.cn/large/67e8b178ly4hp3fhi2l3uj21o00u0b2b.jpg' },
    { id: 2, url: 'https://img1.baidu.com/it/u=715527918,529365490&fm=253&fmt=auto&app=120&f=JPEG?w=899&h=500' },
    { id: 3, url: 'https://b0.bdstatic.com/eb55c8cd64a8@h_1280' },
]);
const gridList = ref([
    { id: 1, icon: 'calendar-o', text: '每日推荐' },
    { id: 2, icon: 'service-o', text: '私人FM' },
    { id: 3, icon: 'todo-list-o', text: '歌单' },
    { id: 4, icon: 'bar-chart-o', text: '排行榜' },
]);
const songList = ref([
    { id: 1, url: 'https://img2.baidu.com/it/u=168590827,1280265529&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', name: '今天从《晴天》开始' },
    { id: 2, url: 'https://img2.baidu.com/it/u=1858292141,3587727348&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', name: '华语经典回忆杀' },
    { id: 3, url: 'https://imge.kugou.com/stdmusic/20240427/20240427191301775727.jpg', name: '欧美流行精选' },
    { id: 4, url: 'https://imge.kugou.com/stdmusic/20220507/20220507113657285312.jpg', name: '日韩音乐盛宴' },
    { id: 5, url: 'https://img1.baidu.com/it/u=4050763066,3874124631&fm=253&app=120&f=JPEG?w=1422&h=800', name: '古风歌曲合集' },
    { id: 6, url: 'https://img0.baidu.com/it/u=377267631,2990999101&fm=253&app=138&f=JPEG?w=760&h=760', name: '轻音乐放松时光' },
    { id: 7, url: 'https://img1.baidu.com/it/u=3575126618,2505183193&fm=253&app=138&f=JPEG?w=820&h=800', name: '民谣温暖治愈' },
    { id: 8, url: 'https://img0.baidu.com/it/u=2030267494,2401277417&fm=253&app=138&f=JPEG?w=817&h=800', name: '电音派对舞曲' },
    { id: 9, url: 'https://img2.baidu.com/it/u=147936358,2816222157&fm=253&app=138&f=JPEG?w=813&h=800', name: '摇滚经典重现' }
]);
const onGridClick = (id) => {
    if(id === 1){
        router.push('/daily');
    }else if(id === 2){
        router.push('/fm');
    }else if(id === 3){
        router.push('/songlist');
    }else if(id === 4){
        router.push('/rank');
    }
};
const toSongList = () => {
    router.push('/songlist');
};
</script>
<style lang="less" scoped>
.discover_parent {
    .my-swipe {
        height: 200px;
        
        .van-swipe-item {
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }
    
    .grid {
        margin-top: 10px;
    }
    .songList {
        padding: 10px;
        .top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .left {
                font-weight: bold;
            }
            .right {
                font-size: 12px;
                color: #736d6d;
                border: 1px solid #ccc;
                padding: 2px 5px;
                border-radius: 10px;
            }
        }
        .bottom {
            margin-top: 10px;
            .text{
                font-size: 12px;
                text-align: left;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                line-clamp: 2;
                overflow: hidden;
            }
        }
    }
}
</style>